

<template>
  <div class="user-center">
    <div class="header">
      <img @click="this.$router.push('mine')" class="header-background" style="width: 100%;;display: inline-block;opacity: 0.3;" :src="require('@/assets/img/sky.jpeg')" />
      <img class="avatar" style="display: block;position: absolute; width: 1.5rem;height: 1.5rem;
    top: 4.3rem;
    left: 0.3rem;
    border-radius: 50%;"
           :src="require('@/assets/img/default-avatar.png')" />
      <span style="display: block;
    position: absolute;
    font-size: 0.4rem;
    top: 4.7rem;
    left: 2.1rem;">测试人员</span>

<!--      <el-row style="width: 90%;-->
<!--    margin: auto;-->
<!--    border-radius: 0.1rem;-->
<!--    background: rebeccapurple;" :gutter="40">-->
<!--        <el-col :span="24"><div class="grid-content ep-bg-purple">-->
<!--          <span style="-->
<!--    font-size: 0.5rem;-->
<!--    text-align: left;-->
<!--">会员</span>-->
<!--        </div>-->

<!--        </el-col>-->
<!--      </el-row>-->

<!--      <el-row :gutter="20">-->
<!--        <el-col :span="8"><div class="grid-content ep-bg-purple">-->
<!--          积分0-->
<!--        </div></el-col>-->
<!--        <el-col :span="8"><div class="grid-content ep-bg-purple">-->
<!--          权益5-->
<!--        </div></el-col>-->
<!--        <el-col :span="8"><div class="grid-content ep-bg-purple">-->
<!--          优惠券0-->
<!--        </div></el-col>-->
<!--      </el-row>-->
<!--      -->
<!--      -->

      <!-- menu-wrap begin -->
      <div class="menu-wrap">
        <div class="menu-item" style="">
          <div class="menu-item-left" style=""><el-icon><Notebook /></el-icon>总资产</div>
          <div class="menu-item-right" style="">
            <div style="display: inline-flex;color: #cccccc;font-size: 0.35rem;">138.09</div>
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>

        <div class="menu-item" style="">
          <div class="menu-item-left" style=""><el-icon><View /></el-icon>修改密码</div>
          <div class="menu-item-right" style=""><el-icon><ArrowRight /></el-icon></div>
        </div>

        <div class="menu-item" style="" @click="logout">
          <div class="menu-item-left" style=""><el-icon><Setting /></el-icon>退出登录</div>
          <div class="menu-item-right" style=""><el-icon><ArrowRight /></el-icon></div>
        </div>
      </div>



    </div>

    <el-dialog
        v-model="confirmDialog.visible"
        custom-class="comment-list-dialog"
        title=""
        width="90%"
    >

      <el-form label-width="auto" :label-position="'top'">

        <el-form-item label="确定要退出登录吗">

        </el-form-item>

        <el-form-item style="text-align: right">
          <div style="text-align: right; width: 100%">
            <el-button type="primary" @click="logoutConfirm()"
            >确定</el-button
            >
          </div>
        </el-form-item>
      </el-form>


    </el-dialog>

  </div>
</template>

<script>
import { getTestApi } from "@/api/webApi.js"
// import { ElButton } from "element-plus/"
import {ArrowRight, Notebook, Search, Setting, UserFilled, View} from "@element-plus/icons-vue"
import { mapGetters } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  inheritAttrs: false,
  name: "UserCenter",
  components: {Setting, View, Notebook, ArrowRight, Search,UserFilled },
  setup() {},
  created() {},
  mounted() {
    console.log('this.isLoggedIn',this.isAuthenticated)
    if(!this.isAuthenticated){
      this.$router.push('/login')
    }
  },
  computed:{
    ...mapGetters(['isAuthenticated'])
  },
  data() {
    return {
      iconColor: "#aaa",
      confirmDialog:{
        visible:false
      }
    }
  },
  methods:{
    logoutConfirm(){
      this.$store.dispatch('logout').then(res=>{
        this.$router.push('/login')
      })
    },
    logout(){
      this.confirmDialog.visible=true
      // ElMessageBox.confirm(
      //     '确定要退出登录吗',
      //     'Warning',
      //     {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning',
      //     }
      // )
      //     .then(() => {
      //       ElMessage({
      //         type: 'success',
      //         message: 'Delete completed',
      //       })
      //     })
      //     .catch(() => {
      //       ElMessage({
      //         type: 'info',
      //         message: 'Delete canceled',
      //       })
      //     })
    },
    goToUserCenter(){
      this.$router.push('/user')
    }
  }
}
</script>

<style scoped>
.menu-wrap{width: 90%;margin:auto;background: ;border-radius: 0.1rem;margin-top: 0.2rem;}
.menu-item{
  display: flex
;
  justify-content: left;
  align-items: center;
  gap: 0.13rem;
  line-height: 1.3rem;
  font-size: 0.4rem;

}

.menu-item-left{
  display: inline-flex; justify-content: center; align-items: center; gap: 0.13rem;padding-left: 0.3rem;
}
.menu-item-right{
  display: inline-flex; justify-content: center; align-items: center; gap: 0.13rem;right: 0.3rem;
  position: absolute
}


.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  font-size: 0.4rem;
  text-align: center;
}
</style>